Web Task 1

Task 1 - Create and Deploy a Langing Page

Image

- Instructions

  • Set Up the HTML Structure:
    • Create an HTML file (index.html).
    • CInside the < body > tag, add a < nav > element with links for Home, About, Service, Project, and Contact.
    • Add a < section > with a heading (< h1 >), a paragraph (< p >), and a button (< a >).

  • Style the Page with CSS:
    • Create a CSS file (style.css) and link it to your HTML file.
    • Use a background image for the section with a dark overlay using background-image and linear-gradient.
    • Style the text (heading, paragraph) to be centered and have good contrast.
    • Style the button to have a background color, padding, and uppercase text.

  • Add Hover Effects:
    • For the navigation links and the button, add hover effects:
      • Change the background color when hovering over the links and button.

  • Responsive Design:
    • Make sure the page looks good on mobile devices:
      • Adjust font sizes.
      • Ensure the navigation and content layout work well on smaller screens.

Extra:

If possible, add smooth scrolling when navigation links are clicked.

  • Use HTML and CSS for your implementation.
  • Ensure your code is well-documented with comments explaining the functionality of each part.

  • Deploy your project on GitHub.

  • We will be sharing a Google Form shortly to collect your GitHub repository link.
  • Submit your project link through the provided Google Form link.
  • After submission, we will verify your task.

Social Medias

Loading...